<template>
  <div class="zeus-cascader-items"
       :style="{ height }">
    <div class="zeus-cascader-items-left">
      <div class="zeus-cascader-items-label"
           v-for="(item, index) in source"
           :key="index"
           @click="clickItem(item)">
        <span class="zeus-cascader-items-label-name">{{ item.name }}</span>
        <span class="zeus-cascader-items-label-icon">
          <template v-if="item.name === loadingItem.name">
            <svg class="loading">
              <use xlink:href="#icon-loading"></use>
            </svg>
          </template>
          <template v-else>
            <svg class="right"
                 v-if="loadData ? !item.isLeaf : item.children">
              <use xlink:href="#icon-right"></use>
            </svg>
          </template>
        </span>

        <span :class="{scroll: source.length > 5}"></span>
      </div>
    </div>
    <div class="zeus-cascader-items-right"
         v-if="rightItems">
      <CascaderItem :height="height"
                    :level="level + 1"
                    :loadData="loadData"
                    :selected="selected"
                    :loadingItem="loadingItem"
                    @update:selected="onUpdateSelected"
                    @update:colse="closePopover"
                    :source="rightItems" />
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, computed, ref, provide } from "vue";
export default {
  name: "CascaderItem",
  props: {
    source: {
      type: Array,
    },
    // Item高度
    height: {
      type: String,
    },
    // 当前层级
    level: {
      type: Number,
      default: 0,
    },
    // 用户选中
    selected: {
      type: Array,
      default: () => [],
    },
    // 动态加载
    loadData: {
      type: Function,
    },
    // 当前加载项
    loadingItem: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    // 用户选择xxx
    const clickItem = (item) => {
      let copy = JSON.parse(JSON.stringify(props.selected));
      copy[props.level] = item;
      copy.splice(props.level + 1);
      context.emit("update:selected", copy);
      if (!item.children && !props.loadData) {
        context.emit("update:colse", false);
      } else if (props.loadData && item.isLeaf) {
        context.emit("update:colse", false);
      }
    };

    // 选中后展示
    const rightItems = computed(() => {
      if (props.selected[props.level]) {
        let selected = props.source.filter(
          (item) => item.name === props.selected[props.level].name
        );
        if (
          selected &&
          selected[0].children &&
          selected[0].children.length > 0
        ) {
          return selected[0].children;
        }
      }
    });

    const onUpdateSelected = (newSelected) => {
      context.emit("update:selected", newSelected);
    };

    const closePopover = () => {
      context.emit("update:colse", false);
    };

    return {
      clickItem,
      onUpdateSelected,
      closePopover,
      rightItems,
    };
  },
};
</script>

<style lang="scss">
.zeus-cascader-items {
  display: flex;
  height: 100px;
  &-left,
  &-right {
    height: 100%;
  }

  &-left {
    padding: 0.3em 0;
    overflow: auto;

    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 4px;
      display: none;
    }
    // 滚动的滑块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.2);
    }
    // 外层轨道
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }
    &:hover {
      &::-webkit-scrollbar {
        display: block;
        width: 4px;
      }
      .zeus-cascader-items-label {
        .scroll {
          display: none;
        }
      }
    }
  }

  &-right {
    border-left: 1px solid #eee;
  }

  &-label {
    padding: 0.5em 1em;
    padding-right: calc(1em - 4px);
    white-space: nowrap;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      background: #f5f7fa;
    }
    &-name {
      margin-right: 1em;
    }

    &-icon {
      display: inline-flex;
      margin-left: auto;
      .right,
      .loading {
        width: 16px;
        height: 16px;
      }
      .loading {
        animation: loading-spin 1s infinite linear;
      }
      @keyframes loading-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .scroll {
      width: 4px;
    }
  }
}
</style>
